<!DOCTYPE html>
<html lang="zh">

<head>
    <link rel="shortcut icon" href="welcome.ico">
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <meta pwd="referrer" content="no-referrer">
    <meta pwd="viewport" content="width=device-width, initial-scale=1.0">
    <title>HEAL</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /*cursor: url(test.cur), auto;*/
            font-family: Gilroy Semi Bold, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
        }


        @keyframes myoff {
            from {
                backdrop-filter: blur(30px)
            }

            to {
                backdrop-filter: blur(0px)
            }
        }

        @keyframes myon {
            from {
                backdrop-filter: blur(0px)
            }

            to {
                backdrop-filter: blur(30px)
            }
        }


        .image__overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .image__overlay--blur_0 {
            backdrop-filter: blur(0px);
        }

        .image__overlay--blur_off {
            -webkit-animation: myoff 1.6s;
            backdrop-filter: blur(0px)
        }

        .image__overlay--blur_on {
            -webkit-animation: myon 1.6s;
            backdrop-filter: blur(30px)
        }

        .video-box {
            position: relative;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.56);
            overflow: hidden;
        }

        .video-box .video-background {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            object-fit: cover;
            min-height: 800px;
        }

        .text_style {
            text-align: center;
            font-size: 20px;
            opacity: .50;
            width: 300px;
            height: 40px;
            border-radius: 100px;
            border: none;
        }

        .layer {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100vh;
            background: rgba(19, 60, 154, .2);
        }

        .slogan {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 684px;
            color: white;
            text-align: center;
            backdrop-filter: blur(2px)
        }

        .slogan .subtitle {
            font-weight: 550;
            font-size: 20px;
            letter-spacing: 10px;
            margin: 0 0 16px;
        }

        .slogan .title {
            font-weight: 550;
            font-size: 50px;
            margin: 0 0 16px;
        }

        .slogan .try-btn {
            position: relative;
            width: 156px;
            height: 54px;
            line-height: 54px;
            margin-top: 40px;
            color: #3370ff;
            background: white;
            text-align: center;
            border-radius: 100px;
            font-weight: 600;
            border: none;
            opacity: .70;
        }

        .BTN_MOSHI_ON_style {
            opacity: .70;
            width: 70px;
            height: 30px;
            font-size: 8px;
            border-radius: 100px;
            border-color: #7fc37e;
            border-style: solid;
            border-width: 3px;
            font-weight: 600;
        }

        .BTN_MOSHI_OFF_style {
            opacity: .40;
            width: 70px;
            height: 30px;
            font-size: 5px;
            border-radius: 100px;
            border: none;
            font-weight: 400;
        }

        bdoy {
            height: 130px;

            line-height: 130px;

            width: 260px;

            cursor: zoom-in;

            background-color: green;

            color: white;

        }

        .slogan .try-btn_reg_on {
            position: relative;
            -webkit-animation: btn_on 1.6s;
            width: 156px;
            height: 54px;
            line-height: 54px;
            margin-top: 40px;
            color: #3370ff;
            background: white;
            text-align: center;
            border-radius: 100px;
            font-weight: 600;
            border: none;
            opacity: .70;
        }

        .slogan .try-btn_reg_off {
            position: relative;
            -webkit-animation: btn_off 1.6s;
            width: 0px;
            height: 54px;
            line-height: 54px;
            margin-top: 40px;
            color: #3370ff00;
            background: white;
            text-align: center;
            border-radius: 100px;
            font-weight: 600;
            border: none;
            opacity: .70;
        }


        @keyframes btn_on {
            from {
                width: 0px;
                color: #3370ff00;
            }

            to {
                color: #3370ff;
                width: 156px;
            }
        }

        @keyframes btn_off {
            from {
                width: 156px;
                color: #3370ff;
            }

            to {
                color: #3370ff00;
                width: 0px;
            }
        }

        .no {
            position: relative;
            left: 50%;
            width: 0px;
            height: 54px;
            line-height: 54px;
            margin-top: 40px;
            margin-left: -78px;
            color: #3370ff00;
            background: white;
            text-align: center;
            border-radius: 100px;
            font-weight: 600;
            display: none;
            border: none;
            opacity: .70;
        }

        .see{
            position: absolute;
            margin: 7px;
            width: 30px;
            height: 30px;
            text-align: center;
            opacity: .70;
            border: none;
            border-radius: 100%;
        }

    </style>
</head>

<body>
<div class="video-box">
    <video class="video-background" preload="auto" loop playsinline autoplay src="aquarium_background.mp4" tabindex="-1"
           controlslist="nodownload" muted="muted"></video>
    <div class="layer">
        <div id="maoboli" class="image__overlay image__overlay--blur_off">
            <div class="slogan">
                <div><span id="T1" class="subtitle">Heal You Want</span></div>
                <div><span id="T2" class="title">生态健康生活视频网</span></div>
                <div><span id="T3" class="subtitle">User-System</span></div>
                <br>
                <div><input type="text" placeholder="账号" id="code" class="text_style"></div>
                <br>
                <div><input type="password" placeholder="密码" id="pwd" class="text_style">
                    <input type="button" class="see" onclick="pwd_style()" value="⚪">
                </div>
                <div>
                    <input type="button" class="try-btn" id="login" onclick="login()" value="登录">
                    <input type="button" class="try-btn_reg_on" id="reg" onclick="reg()" value="注册">
                </div>
                <br>
                <div>
                    <input id="user" class="BTN_MOSHI_ON_style" type="button" value="用户" onclick="u_x()">
                    <input id="admin" class="BTN_MOSHI_OFF_style" type="button" value="管理员" onclick="a_x()">
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    function time() {
    }

    var i = 1;

    function no() {
        document.getElementById("reg").className = "no"
    }

    function user() {
        document.getElementById("maoboli").className = "image__overlay image__overlay--blur_off"
        document.getElementById("admin").className = "BTN_MOSHI_OFF_style"
        document.getElementById("user").className = "BTN_MOSHI_ON_style"
        document.getElementById("T2").innerText = "生态健康生活视频网"
        document.getElementById("T3").innerText = "User-System"
        document.getElementById("reg").className = "try-btn_reg_on"
        i = 1
    }

    function admin() {
        document.getElementById("maoboli").className = "image__overlay image__overlay--blur_on"
        document.getElementById("admin").className = "BTN_MOSHI_ON_style"
        document.getElementById("user").className = "BTN_MOSHI_OFF_style"
        document.getElementById("T2").innerText = "管理员登录"
        document.getElementById("T3").innerText = "Admin-System"
        document.getElementById("reg").className = "try-btn_reg_off"
        setTimeout(no, 1600)
        i = 2
    }

    function login() {
        var code = document.getElementById("code").value
        var pwd = document.getElementById("pwd").value
        if (i == 1) {
            $.ajax({
                type: "post",
                url: "/user/login",
                data: {
                    user_name: code,
                    user_pwd: pwd,
                },
                async: false,
                success: function (response) {
                    if (code == null || code == "" || pwd == null || pwd == ""){
                        alert("账号或密码不能为空")
                    }else if (response == "error_name")
                        alert("账号不存在")
                    else if (response == "error_pwd") {
                        alert("密码错误")
                    } else if(response == "ok"){
                        setTimeout(window.location.href = "/video/index", 1000);
                    }else if(response == "error_unknow"){
                        alert("未知错误")
                    }else{
                        alert("500");
                        return;
                    }
                }
            });

        } else if (i == 2) {
            $.ajax({
                type: "post",
                url: "/admin/login",
                data: {
                    admin_name: code,
                    admin_pwd: pwd,
                },
                async: false,
                success: function (response) {
                    if (code == null || code =="" || pwd == null || pwd == ""){
                        alert("账号或密码不能为空")
                    }else if (response == "error_name")
                        alert("账号不存在")
                    else if (response == "error_pwd") {
                        alert("密码错误")
                    } else if(response == "ok"){
                        setTimeout(window.location.href = "/video/main", 1000);
                    }else if(response == "error_unknow"){
                        alert("未知错误")
                    }else {
                        alert("500");
                        return;
                    }
                }
            });
        }
    }


    function pwd_style() {
        var p_id = document.getElementById("pwd").type
        if (p_id == "password") {
            document.getElementById("pwd").type = "text"
        }
        if (p_id == "text") {
            document.getElementById("pwd").type = "password"

        }
    }


    function reg() {
        window.location.replace("/html/user/register.html")
    }
</script>

<script>
    function u_x() {
        var u = document.getElementById("user")
        var a = document.getElementById("admin")
        var r = document.getElementById("reg")
        a.disabled = true
        u.disabled = true
        r.disabled = true
        var timeing = setInterval(function () {
        }, 1000);
        //延迟执行
        user()
        window.setTimeout(function () {
            //结束定时,恢复按钮可用
            clearInterval(timeing);
            a.disabled = false
            u.disabled = false
            r.disabled = false
        }, 2000);
    }

    function a_x() {
        var u = document.getElementById("user")
        var a = document.getElementById("admin")
        var r = document.getElementById("reg")
        a.disabled = true
        u.disabled = true
        r.disabled = true
        var timeing = setInterval(function () {
        }, 1000);
        //延迟执行
        admin()
        window.setTimeout(function () {
            //结束定时,恢复按钮可用
            clearInterval(timeing);
            a.disabled = false
            u.disabled = false
            r.disabled = false
        }, 2000);
    }
</script>
</body>

</html>